/*
 * @Author: your name
 * @Date: 2021-04-25 19:19:29
 * @LastEditTime: 2021-10-13 17:01:14
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /ant-design-pro-5/src/pages/d3/index.tsx
 */
import { Component } from "react";
import { PageContainer } from "@ant-design/pro-layout";
import {
  CountriesPopulation,
  PathsLayer,
  CablePathsLayer,
  PointsLayer,
  FloatingLandmasses,
  SankeyDiagram,
  WorldCities,
  CustomLayer,
  Csv,
} from "./components";

class D3Demo extends Component<any> {
  state = {
    tabActiveKey: "Csv",
  };
  render() {
    const { tabActiveKey } = this.state;
    return (
      <PageContainer
        title="d3.js"
        tabActiveKey={tabActiveKey}
        onTabChange={(tabActiveKey: string) => {
          this.setState({ tabActiveKey });
        }}
        tabList={[
          {
            tab: "Csv",
            key: "Csv",
          },
          {
            tab: "Custom Layer",
            key: "CustomLayer",
          },
          {
            tab: "Floating Landmasses",
            key: "FloatingLandmasses",
          },
          {
            tab: "Sankey Diagram",
            key: "SankeyDiagram",
          },
          {
            tab: "Paths Layer",
            key: "PathsLayer",
          },
          {
            tab: "Points Layer",
            key: "PointsLayer",
          },
          {
            tab: "Cable Paths",
            key: "CablePathsLayer",
          },
          {
            tab: "Countries Population",
            key: "CountriesPopulation",
          },
          {
            tab: "World Cities",
            key: "WorldCities",
          },
        ]}
      >
        {tabActiveKey === "SankeyDiagram" && <SankeyDiagram />}
        {tabActiveKey === "FloatingLandmasses" && <FloatingLandmasses />}
        {tabActiveKey === "PathsLayer" && <PathsLayer />}
        {tabActiveKey === "PointsLayer" && <PointsLayer />}
        {tabActiveKey === "CablePathsLayer" && <CablePathsLayer />}
        {tabActiveKey === "CountriesPopulation" && <CountriesPopulation />}
        {tabActiveKey === "WorldCities" && <WorldCities />}
        {tabActiveKey === "CustomLayer" && <CustomLayer />}
        {tabActiveKey === "Csv" && <Csv />}
      </PageContainer>
    );
  }
}

export default D3Demo;
